  <div class="col-sm-12" style="margin-bottom: 0px;">
    <rd-widget ng-if="ctrl.users">
      <rd-widget-header icon="fa-user-lock" title-text="Effective access viewer"></rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="col-sm-12 form-section-title">
            User
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <span class="small text-muted" ng-if="ctrl.users.length === 0">
                No user available
              </span>
              <ui-select ng-if="ctrl.users.length > 0" ng-model="ctrl.selectedUser" ng-change="ctrl.onUserSelect()">
                <ui-select-match placeholder="Select a user">
                  <span>{{ $select.selected.Username }}</span>
                </ui-select-match>
                <ui-select-choices repeat="item in (ctrl.users | filter: $select.search)">
                  <span>{{ item.Username }}</span>
                </ui-select-choices>
              </ui-select>
            </div>
          </div>

          <div class="col-sm-12 form-section-title">
            Access
          </div>
          <div>
            <div class="small text-muted" style="margin-bottom: 15px;">
              <i class="fa fa-info-circle blue-icon" aria-hidden="true" style="margin-right: 2px;"></i>
              Effective role for each endpoint will be displayed for the selected user
            </div>
          </div>
            <access-viewer-datatable
                    ng-if="ctrl.users"
                    table-key="access_viewer"
                    dataset="ctrl.userRoles"
                    order-by="EndpointName"
            >
            </access-viewer-datatable>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
